<template>
    <div>
        <van-pull-refresh v-model="tabRefreshing" @refresh="tableViewRefresh">

            <van-list v-model="tableViewLoading" :finished="tableViewFinished" :finished-text='requestNoMoreMessage'
                :error-text="requestErrorMessage" @load='tableViewLoadMore' style="margin-bottom: 50px;">

                <van-cell v-for="(item, index) in tableViewDataList" :key="index">
                    <div>
                        <div class="titlefont"> {{ item.businessName }}</div>
                        <div class="infosfont"> 商机编码:{{ item.businessId }}</div>
                        <div class="infosfont"> 地市:{{ item.city }}____县区:{{ item.county }}</div>
                        <div class="infosfont" style="display:flex;justify-content:space-between"> 拜访状态:{{ item.currentState }}<van-button plain hairline type="info"  size="mini" @click="toDraw(item)">发起售前拜访</van-button></div>
                    </div>
                    
                </van-cell>

                <!-- 请求第一页数据时，出现错误或无数据 展示空白提示界面
                请求后续数据时，只做弹窗提示 -->
                <div v-show="showEmptyView" class="text-c">
                    <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                        style="margin: 120px 50px 0" @click="tableViewRefresh()" />
                </div>

                <div v-show="showErrorView" class="text-c">
                    <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')" alt="获取数据失败"
                        style="margin: 120px 50px 0" @click="tableViewRefresh()" />
                    <div class="color-b font14" style="margin: 20px 0 0 15px">
                        {{ requestErrorMessage }}
                    </div>
                </div>

            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>

import { requestDrawupSJListData2 } from "@/api/dictapi";
import jDrawupUtil from "../../assets/js/dict_process_helper";
import jTool from "@/assets/js/jHelper";
import util from '@/assets/js/public';
import { Toast } from "vant";
import { Notify } from "vant";
import { mapGetters } from "vuex";
import moment from 'moment'

export default {
    name: 'sjlistview',
    data() {
        return {

            currentPage: 1,
            appDecision: {
                page: 1, rows: 10, size: 10,
                businessId: '', // 商机编码
                businessName: '',  // 商机名称
                startDate: '',  // 申请时间 起始值
                endDate: '',    // 申请时间 终止值
            },
            kv:{},
            requestNoMoreMessage: '',
            requestErrorMessage: '',

            tableViewDataList: [],
            tabRefreshing: false,
            tableViewLoading: false,
            tableViewFinished: false,
        }
    },

    props: ['pushParams'],

    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),

        showEmptyView () {

            return this.appDecision.page === 1 && this.tableViewDataList.length === 0 && jTool.stringIsEmpty(this.requestErrorMessage);
        },

        showErrorView() {

            return this.appDecision.page === 1 && !jTool.stringIsEmpty(this.requestErrorMessage);
        }

    },

    created() {
      this.kv={
              'direction':'desc',
              'properties':'createdTime',
              'currentUserCode': util.encrypt(this.user.userName),
              'source': 'MOBILE',
            }
    },

    mounted() {

    },

    activated() {

        // this.tableViewRefresh()
    },

    methods: {

        // 查询
        requestDataWithFliterCondition(s_businessId, s_businessName,s_startDate,s_endDate) {
            this.appDecision.businessId = s_businessId;
            this.appDecision.businessName = s_businessName;
            this.appDecision.startDate = s_startDate;
            this.appDecision.endDate = s_endDate;
            this.tableViewRefresh();
        },

        tableViewRefresh() {

            this.appDecision.page = 1;
            this.tabRefreshing = true;
            this.tableViewLoading = true;
            this.tableViewFinished = false;
            this.requestListDatas();
        },

        tableViewLoadMore() {

            if (!jTool.stringIsEmpty(this.requestNoMoreMessage)) {
                this.tableViewLoading = false
                this.tableViewFinished = true;
            }
            else {
                this.tabRefreshing = false;
                this.requestListDatas();
            }
        },

        requestListDatas() {

            let urlChip = jDrawupUtil.getSJListURLWithCode(this.pushParams.processID);
            requestDrawupSJListData2(urlChip, Object.assign(
              { kv: this.kv },{ appDecision: this.appDecision }
              ))
                .then((result) => {

                    if (!result.data) {
                        this.tableViewFinished = true;
                        this.requestCompletion('result.message');
                        return;
                    }

                    let listdetails = [];
                    if (result.data.data.content) {
                        listdetails = listdetails.concat(result.data.data.content);
                    }

                    if (this.appDecision.page == 1) {
                        this.tableViewDataList = listdetails;
                    }
                    else
                    {
                        this.tableViewDataList = this.tableViewDataList.concat(listdetails);
                    }

                    if (result.data.data.totalPages <= this.appDecision.page) {
                        this.requestNoMoreMessage = '没有更多数据！';
                        this.tableViewFinished = true;
                    }
                    else
                    {
                        this.appDecision.page++;
                        this.requestNoMoreMessage = '';
                    }

                    this.requestCompletion('');
                })
                .catch((error) => {
                    this.tableViewFinished = true;
                    this.requestCompletion('获取数据失败,请稍后重试');
                });
        },


        requestCompletion(error) {

            this.tabRefreshing = false;
            this.tableViewLoading = false

            if (!jTool.stringIsEmpty(error)) {
                this.requestErrorMessage = error;
                Notify({ type: 'warning', message: error })
            }
        },

        timeUtil(value) {
            return moment(value).format('YYYY-MM-DD HH:mm:ss');
        },


        toDraw(item) {
            this.$router.push(
                {
                    name: 'sqbfdetail',
                    query: {
                        location: 'dict.start',
                        isdraw: '1',
                        pmInsType:'SQBF',
                        creatDatas:item
                    }
                }
            )
        }
    }
}
</script>

<style scoped>
.btn {
    margin-bottom: 60px;
    margin-top: 60px;
}

.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
</style>